<template>
    <div id="container"></div>
</template>


<script>
import * as THREE from 'three'

export default {
    data() {
        return {
            camera: null,
            scene: null,
            renderer: null,
            meshs: [],
            cubeTexture: [
                require('../../public/static/texture/cube/wow1.png'),
                require('../../public/static/texture/cube/wow2.png'),
                require('../../public/static/texture/cube/wow3.png'),
                require('../../public/static/texture/cube/wow4.png'),
                require('../../public/static/texture/cube/wow5.png'),
                require('../../public/static/texture/cube/wow6.png'),
            ]
        }
    }, 
    mounted() {
        this.init()
        setTimeout(()=>{
            this.animate()
        }, 100)
    },
    methods: {
        init() {
            let container = document.getElementById('container')

            this.camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.01, 1000)
            this.scene = new THREE.Scene()
            this.renderer = new THREE.WebGLRenderer({
                antialias: true
            }) 

            this.renderer.setSize(container.clientWidth, container.clientHeight)
            this.renderer.setClearColor(0x00ee00, 0.7)

            // 加载纹理 https://threejs.org/docs/index.html?q=TextureLoader#api/en/loaders/TextureLoader
            // 六个面每一面贴不同纹理
            let textureLoader = new THREE.TextureLoader()
            let materials = []
            for(let i=0; i<6; i++){
                materials.push(
                    new THREE.MeshBasicMaterial({
                        map: textureLoader.load(this.cubeTexture[i]),
                        // opacity: 0.8,
                        alphaToCoverage: true
                    })
                )
            }

            // let geo = new THREE.BoxGeometry(0.4, 0.4, 0.4)
            // this.mesh = new THREE.Mesh(geo, materials)
            // this.mesh.position.z = -1
            // this.scene.add(this.mesh)

            for(let i=0; i<50; i++){
                let size = Math.random() * 0.3
                let geo = new THREE.BoxGeometry(size, size, size)
                this.meshs[i] = new THREE.Mesh(geo, materials)
                this.meshs[i].position.x = Math.random() > 0.5 ? Math.random() * 1 : -Math.random() * 1
                this.meshs[i].position.y = Math.random() > 0.5 ? Math.random() * 1 : -Math.random() * 1
                this.meshs[i].position.z = -Math.random() * 2
            }

            this.meshs.forEach((val) => {
                this.scene.add(val)
            })

            container.appendChild(this.renderer.domElement)

        },        
        animate() {
            requestAnimationFrame(this.animate)
            this.meshs.forEach((val) => {
                let step = Math.random() * 0.1
                val.rotation.x += step
                val.rotation.y += step
            })
			this.renderer.render(this.scene, this.camera)
        }
    }
}

</script>


<style scoped>
#container {
    height: 100vh;
}
</style>